import 'package:flutter/material.dart';
import '../../services/ScreenAdatper.dart';
import '../../model/CateModel.dart';
import 'package:dio/dio.dart';
import '../../config/config.dart';
class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> with AutomaticKeepAliveClientMixin{
  int _selectIndex = 0;
  List _leftMenuList = [];
  List _rightItemList = [];
  @override
  void initState() {
    super.initState();
    _getLeftMenuData();
  }
  @override
  bool get wantKeepAlive => true; 
  _getLeftMenuData() async{
    var api = '${Config.domain}api/pcate';
    var result  = await Dio().get(api);
    var focus = CateModel.fromJson(result.data);
    setState(() {
      this._leftMenuList =  focus.result;
    });
    _getRightListData(focus.result[0].sId);
  }
  
  _getRightListData(pid) async{
    var api = '${Config.domain}api/pcate?pid=${pid}';
    var result  = await Dio().get(api);
    var focus = CateModel.fromJson(result.data);
    setState(() {
      this._rightItemList =  focus.result;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    ScreenAdatper.init(context);
    var allWidth = ScreenAdatper.getScreenWidth();
    //左侧宽度
    var leftWidth = allWidth / 4;
    //右侧每一项宽度=（总宽度-左侧宽度-GridView外侧元素左右的Padding值-GridView中间的间距）/3
    var rightItemWidth = ScreenAdatper.width((allWidth - leftWidth - 40) / 3);
    //获取计算后的高度
    var rightItemHeight = rightItemWidth + ScreenAdatper.height(28);
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.center_focus_weak,size:28,color:Colors.black87),
          onPressed: (){

          },
        ),
        title: InkWell(
          child: Container(
            padding: EdgeInsets.only(left: ScreenAdatper.width(30)),
            height:ScreenAdatper.height(68),
            decoration: BoxDecoration(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              borderRadius: BorderRadius.circular(30)
            ),
            child: Row(
              children: <Widget>[
                Icon(Icons.search),
                Text("笔记本",style: TextStyle(fontSize: ScreenAdatper.size(28)),)
              ],
            ),
          ),
          onTap: (){
            Navigator.pushNamed(context, '/search');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.message,size:28,color:Colors.black87),
            onPressed: (){},
          )
        ],
      ),
      body: Row(
      children: <Widget>[
        Container( 
          width: leftWidth,
          height: double.infinity,
          child: ListView.builder(
             itemCount: _leftMenuList.length,
             itemBuilder: (content,index){
               return Column(
                 children: <Widget>[
                    InkWell(
                      onTap: (){
                        setState(() {
                          _selectIndex = index;
                          _getRightListData(this._leftMenuList[index].sId);
                        });
                      },
                      child: Container(
                        padding: EdgeInsets.only(top: ScreenAdatper.height(25)),
                        width: double.infinity,
                        height: ScreenAdatper.height(84),
                        child: Text(this._leftMenuList[index].title,textAlign: TextAlign.center),
                        color: _selectIndex == index ? Color.fromRGBO(240, 246, 246, 0.9) :Colors.white,
                      ),
                    ),
                    Divider(height: 1,)
                 ],
               );
             },
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.all(ScreenAdatper.width(20)),
            height: double.infinity,
            color: Color.fromRGBO(240, 246, 246, 0.9),
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: rightItemWidth / rightItemHeight,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10
              ),
              itemCount: this._rightItemList.length,
              itemBuilder: (context,index){
               String sPic = this._rightItemList[index].pic;
               sPic = Config.domain + sPic.replaceAll('\\', '/');
                return InkWell(
                  onTap: (){
                    Navigator.pushNamed(context, '/productList',arguments:{
                      "cid":this._rightItemList[index].sId
                    });
                  },
                  child: Container(
                      child: Column(
                        children: <Widget>[
                          AspectRatio(
                            aspectRatio: 1/1,
                            child:Image.network("${sPic}") ,
                          ),
                          Container(
                            height: ScreenAdatper.height(28),
                            child: Text(this._rightItemList[index].title),
                          )
                        ],
                      ),
                    ),
                );
              },
            ) ,
          ),
        )
      ],
    ),
    );
  }
}